<template>
  <div class="hello">
    <!-- element-ui 插件的表单 -->
    <el-form>
      <!-- 表单项 -->
      <!-- <el-form-item label="生成验证码">
      </el-form-item> -->

      <!-- 生成验证码 -->
      <el-input v-model="phone" placeholder="输入手机号" :style="{display:'inline'}">
      </el-input>
      <el-button @click="getSmsCode" :style="{marginLeft:'10px'}">生成验证码</el-button>
      
      <!-- 校验验证码 -->
      <div :style="{marginTop:'10px', marginBottom:'10px'}"></div>
      <el-input v-model="smsCode" placeholder="输入验证码" :style="{display:'inline'}">
      </el-input>
      <el-button @click="validateSmsCode" :style="{marginLeft:'10px'}">校验验证码</el-button>
    
    </el-form>
    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  // props: {
  //   msg: Number
  // }
  data(){
    return {
      phone: "",
      smsCode: "",
    }
  },

  methods:{
    // 生成短信验证码
    getSmsCode(){
      // alert("生成。。。")
      if(!this.phone){
        alert("请输入手机号")
        return
      }
      // 向django发送GET请求
      this.$axios.get("/get_sms_code/", {
        params:{
          phone: this.phone
          }
      }).then(res => {
        console.log("生成验证码的响应:", res)
        if(res.data.code == 200){
          alert(res.data.msg + res.data.smsCode)
        }else{
          alert(res.data.err)
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    },

    // 校验短信验证码
    validateSmsCode(){
      // alert("校验。。。")
      if(!this.phone||!this.smsCode){
        alert("请输入手机号和验证码")
        return
      }

      // 向django发送POST 请求，校验验证码
      this.$axios.post('/get_sms_code/', {
        phone: this.phone,
        smsCode: this.smsCode
      }).then(res => {
        console.log("验证的响应:", res)
        if(res.data.code == 200){
          alert(res.data.msg)
        }else{
          alert(res.data.err)
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    }
  },
}
</script>


<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.label{
  text-align:left;
}
</style>
